<template>
	<view class="consumptionLog_container">
		<!--  -->
		<uni-card title="Dcloud" note="true" v-for="(item, index) in consumptionLog" :key="index">
			<template slot="title">
				<u-row>
					<u-col span="9">
						<u--text
							:prefixIcon="index + 1"
							iconStyle="color: #18b566;margin-right:10px;text-decoration: underline;font-weight: 400;"
							size="14"
							lineHeight="30"
							align="left"
							type="info"
							:text="'订单号:'+item.uUID"
						/>
					</u-col>
					<u-col span="3">
						<u--text
							suffixIcon="checkbox-mark"
							iconStyle="color: #18b566;font-weight: bold;"
							mode="price"
							lineHeight="30"
							size="15"
							align="right"
							type="warning"
							:text="item.payPrice"
						/>
					</u-col>
				</u-row>
				<u-divider style="margin: 0;"></u-divider>
			</template>
			<u-row>
				<u-col span="6"><u--text prefixIcon="hourglass" size="12" align="left" type="info" :text="item.createDate" /></u-col>
				<u-col span="6"><u--text prefixIcon="hourglass-half-fill" size="12" align="right" type="info" :text="item.payDate" /></u-col>
			</u-row>
		</uni-card>
		<u-empty mode="list" v-if="consumptionLog.length == 0"></u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			consumptionLog: []
		};
	},
	onPullDownRefresh() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		let consumptionLog = uni.getStorageSync('consumptionLog');
		this.$axios
			.get('/account/consumptionLog', {
				params: {
					first: consumptionLog.length == 0 ? 1 : 0
				}
			})
			.then(res => {
				if (consumptionLog.length == 0) {
					this.consumptionLog = res.data.body;
					uni.setStorageSync('consumptionLog', res.data.body);
				} else {
					//es6合并数组
					let array = [...this.consumptionLog, ...res.data.body];
					this.consumptionLog = this.delRepeatItem(array);
					uni.setStorageSync('consumptionLog', this.consumptionLog);
				}
				uni.stopPullDownRefresh();
				uni.hideLoading();
			},err=>{
				uni.hideLoading();
			});
	},
	onLoad() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		this.getConsumptionLog();
	},
	watch:{
		consumptionLog(newVal, oldVal){
			uni.hideLoading();
		}
	},
	methods: {
		delRepeatItem(array) {
			// es5合并数组，也可以克隆
			let arr = array.concat();
			for (var i = 0; i < arr.length; i++) {
				for (var j = i + 1; j < arr.length; j++) {
					if (arr[i].uUID == arr[j].uUID) {
						arr.splice(j, 1);
					}
				}
			}
			return arr;
		},
		getConsumptionLog() {
			uni.getStorage({
				key: 'consumptionLog',
				success: res => {
					this.consumptionLog = res.data;
				},
				fail: () => {
					this.$axios
						.get('/account/consumptionLog', {
							params: {
								first: 1
							}
						})
						.then(res => {
							uni.setStorageSync('consumptionLog', res.data.body);
							this.consumptionLog = res.data.body;
						});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.consumptionLog_container {
	.u-divider {
		margin: 5px 0 !important;
	}
	.uni-card__content {
		padding: 5px 0 !important;
	}
}
</style>
